<template>
  <div class="student-list">
    <cell v-for="stu of list" :key="stu.id" :value="stu.is_default == 1 ? '默认' : ''" :title="stu.name" @click.native="toEdit(stu)" :inline-desc="stu.school+'，'+stu.class+'年级'" is-link></cell>
    <actionsheet
      v-model="show"
      :menus="menus"
      @on-click-menu="click"></actionsheet>

    <div class="footer">
      <x-button type="primary" action-type="button" link="/edit-student">添加</x-button>
    </div>
    
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import { Cell, Group, Actionsheet, XButton } from "vux";

export default {
  components: {
    Cell,
    Group,
    Actionsheet,
    XButton
  },
  data() {
    return {
      list: [],
      student: {}, //被选中的学生
      show: false,
      menus: {
        change: "切换学生",
        edit: "编辑",
        delete: "删除"
      }
    };
  },
  props: {},
  watch: {},
  methods: {
    goBack() {
      this.$router.replace("/find");
    },
    toEdit(student) {
      this.student = student;
      this.show = true;
    },
    click(key) {
      switch (key) {
        case "change":
          this.change();
          break;
        case "edit":
          this.edit();
          break;
        case "delete":
          this.delete();
          break;

        default:
          break;
      }
    },
    change() {
      this.$$api_user_update_default_student({
        data: {
          id: this.student.id,
          user_id: this.userID
        },
        fn: res => {
          this.$store
            .dispatch("update_default_student", this.student)
            .then(this.loadData);
        }
      });
    },
    edit() {
      console.log("edit....");
      this.$router.replace(`/edit-student?id=${this.student.id}`);
    },
    delete() {
      if (this.student.is_default == 1)
        return this.$vux.toast.text("不能删除默认学生", "center");
      this.$$api_user_delete_student({
        data: this.student.id,
        fn: this.loadData
      });
    },
    loadData() {
      this.$$api_user_query_student_list({
        data: this.userID,
        fn: res => {
          console.log("res::::", res);
          this.list = res;
        }
      });
    }
  },
  filters: {},
  computed: {
     ...mapGetters(["userID", "student"])
  },
  created() {},
  mounted() {
    this.loadData();
  },
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/base.scss";
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.student-list {
  width: 100%;
  height: 100%;
  background: $app-background-color;
  .footer {
    height: 48px;
    width: 100%;
    position: fixed;
    bottom: 0;
    button {
      border-radius: 0;
      height: 48px;
      line-height: 48px;
      padding: 0;
    }
  }

  .tab-bar {
    @include onepx();
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    // box-shadow: 0px 1px 10px 1px #888;
    .sent {
      width: 48px;
      font-size: 30px;
      color: #65acdf;
      line-height: 42px;
      border-right: 1px solid rgba(7, 17, 27, 0.1);
    }
    li {
      flex: 1;
      // color: #999;
      display: block;
      color: #65acdf;
      line-height: 50px;
      i {
        font-size: 18px;
      }
      &:first-child {
        border-right: 1px solid rgba(7, 17, 27, 0.1);
      }
    }

    li.router-link-active {
      color: #018cfc;
      transform: scale(1.1);
    }
  }
}
</style>
